<template>
	<div class="geShou_container" v-loading="domLoading">
		<div class="geShou_head">
			<div class="geShou_head_YuZhong">
				<span class="geShou_head_YuZhong_title">语种:</span>
				<span :class="[{geShou_head_YuZhong_contact_active:item.id == dataInfo.area}]" @click="changeYuZhong(item.id)" class="geShou_head_YuZhong_contact" v-for="(item,index) in YuZhong"
					:key="index">{{item.name}}</span>
			</div>
			<div class="geShou_head_YuZhong">
				<span class="geShou_head_YuZhong_title">分类:</span>
				<span :class="{geShou_head_YuZhong_contact_active: item.id == dataInfo.type}" class="geShou_head_YuZhong_contact" @click="changeFengLei(item.id)" v-for="(item,index) in FengLei"
					:key="index">{{item.name}}</span>
			</div>
			<div class="geShou_head_ShaiXuan">
				<div class="geShou_head_ShaiXuan_title">筛选:</div>
				<div class="geShou_head_ShaiXuan_right">
					<span :class="{geShou_head_YuZhong_contact_active: item.id == dataInfo.initial}" class="geShou_head_ShaiXuan_contact" @click="changeShaiXuan(item.id)" v-for="(item,index) in english"
						:key="index">{{item.name}}</span>
				</div>
			</div>
		</div>
		<div class="geShou_contact" v-loading="domLoading2">
			<div class="geShou_contact_inside" @click="jumpUrl(item.id)" v-for="item in artists" :key="item.id">
				<div class="geShou_contact_inside_img">
					<el-image lazy :src="item.img1v1Url"></el-image>
				</div>
				<div class="geShou_contact_inside_text">
					<span>{{item.name}}</span>
				</div>
			</div>
		</div>
		<div class="geShou_FenYe">
			<el-pagination @current-change="changePage" background layout="prev, pager, next" :total="1000">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		artistList
	} from '../../../../api/index.js'
	export default {
		created() {
			this.domLoading = true 
			artistList(this.dataInfo).then(res => {
				this.artists = res.artists
				this.domLoading = false
			})
		},
		methods:{
			jumpUrl(id){
				this.$router.push({
					path:'/geShou',
					query:{
						id
					}
				})
			},
			changePage(e){
				this.domLoading2 = true
				this.dataInfo.offset = e * this.dataInfo.limit
				console.log(e)
				artistList(this.dataInfo).then(res => {
					this.artists = res.artists
					this.domLoading2 = false
					console.log(res)
				})
			},
			changeYuZhong(id){
				
				this.domLoading2 = true
				this.dataInfo.area = id
				artistList(this.dataInfo).then(res => {
					this.artists = res.artists
					this.domLoading2 = false
					console.log(res)
				})
			},
			changeFengLei(id){
				
				this.domLoading2 = true
				this.dataInfo.type = id
				artistList(this.dataInfo).then(res => {
					this.artists = res.artists
					this.domLoading2 = false
					console.log(res)
				})
			},
			changeShaiXuan(id){
				this.domLoading2 = true
				this.dataInfo.initial = id
				artistList(this.dataInfo).then(res => {
					this.artists = res.artists
					this.domLoading2 = false
					console.log(res)
				})
			}
		},
		data() {
			return {
				dataInfo:{
					type: -1,
					area: -1,
					initial: -1,
					offset: 1,
					limit: 50
				},
				domLoading:false,
				domLoading2:false,
				artists: [],
				YuZhong: [{
						name: '全部',
						id: -1
					},
					{
						name: '华语',
						id: 7
					},
					{
						name: '欧美',
						id: 96
					},
					{
						name: '日本',
						id: 8
					},
					{
						name: '韩国',
						id: 16
					},
					{
						name: '其他',
						id: 0
					}
				],
				FengLei: [{
						name: '全部',
						id: -1
					},
					{
						name: '男歌手',
						id: 1
					},
					{
						name: '女歌手',
						id: 2
					},
					{
						name: '乐队组合',
						id: 3
					}
				],
				english: [{
						name: '热门',
						id: -1
					},
					{
						name: 'A',
						id: 'A'
					},
					{
						name: 'B',
						id: 'B'
					},
					{
						name: 'C',
						id: 'C'
					},
					{
						name: 'D',
						id: 'D'
					},
					{
						name: 'E',
						id: 'E'
					},
					{
						name: 'F',
						id: 'F'
					},
					{
						name: 'G',
						id: 'G'
					},
					{
						name: 'H',
						id: 'H'
					},
					{
						name: 'I',
						id: 'I'
					},
					{
						name: 'J',
						id: 'J'
					},
					{
						name: 'K',
						id: 'K'
					},
					{
						name: 'L',
						id: 'L'
					},
					{
						name: 'M',
						id: 'M'
					},
					{
						name: 'N',
						id: 'N'
					},
					{
						name: 'O',
						id: 'O'
					},
					{
						name: 'P',
						id: 'P'
					},
					{
						name: 'Q',
						id: 'Q'
					},
					{
						name: 'R',
						id: 'R'
					},
					{
						name: 'S',
						id: 'S'
					},
					{
						name: 'T',
						id: 'T'
					},
					{
						name: 'U',
						id: 'U'
					},
					{
						name: 'V',
						id: 'V'
					},
					{
						name: 'W',
						id: 'W'
					},
					{
						name: 'X',
						id: 'X'
					},
					{
						name: 'Y',
						id: 'Y'
					},
					{
						name: 'Z',
						id: 'Z'
					},
					{
						name: '#',
						id: 0
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../../common/css/commonStyle";
	.geShou_container {
		width: 100%;

		.geShou_head {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 20px;

			.geShou_head_YuZhong {
				width: 95%;
				display: flex;
				margin-bottom: 20px;

				.geShou_head_YuZhong_title {
					font-size: 12px;
				}

				.geShou_head_YuZhong_contact {
					border-right: 1px solid #777373;
					color: #777373;
					display: flex;
					justify-content: center;
					width: 70px;
					font-size: 12px;
					cursor: pointer;
				}
				.geShou_head_YuZhong_contact_active {
					color: $wangYiYunColor;
				}
			}

			.geShou_head_ShaiXuan {
				width: 95%;
				display: flex;
				margin-bottom: 20px;

				.geShou_head_ShaiXuan_title {
					font-size: 12px;
				}

				.geShou_head_ShaiXuan_right {
					width: 695px;
					display: flex;
					flex-wrap: wrap;

					.geShou_head_ShaiXuan_contact {
						cursor: pointer;
						border-right: 1px solid #777373;
						color: #777373;
						display: flex;
						justify-content: center;
						width: 70px;
						font-size: 12px;
						margin-bottom: 10px;
					}
					.geShou_head_YuZhong_contact_active {
						color: $wangYiYunColor;
						//background-color: ;
					}
				}
			}
		}

		.geShou_contact {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			margin-bottom: 20px;

			.geShou_contact_inside {
				width: 17%;
				margin-bottom: 25px;
				cursor: pointer;

				.geShou_contact_inside_img {
					width: 100%;
					height: 129px;
					margin-bottom: 10px;

					.el-image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.geShou_contact_inside_text {
					display: flex;
					justify-content: space-between;

					span {
						font-size: 14px;
					}
				}
			}
		}

		.geShou_FenYe {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
		}
	}
</style>>
